
<template>
  <Account>
    <template v-slot:header>
      <NavBar :title="$t('account.uploadProof')" />
    </template>
    <div class="proof">
      <!-- 头部 -->
      <div class="pc-box">
        <div class="l-f">
          <div class="nav-back l-f" @click="onBack">
            <img
              class="nav-back_icon"
              src="@/assets/icons/icon-left.svg"
              alt=""
            />
            <p class="nav-back_label">{{ $t("back") }}</p>
          </div>
        </div>
      </div>
      <div class="proof_form">
        <a-form
          ref="formRef"
          :model="formData"
          :rules="formRules"
          layout="vertical"
        >
          <a-form-item class="l-f1" :label="$t('account.amount')" name="amount">
            <div class="proof_form_input l-f">
              <AmountInput v-model="formData.amount" />
              <p class="proof_form_input_unit l-text-gradient">
                {{ currentCoin.name }}
              </p>
            </div>
          </a-form-item>
          <a-form-item
            class="l-f1"
            :label="$t('account.paymentVoucher')"
            name="voucher"
          >
            <div class="proof_form_upload">
              <ImageUpload @success="uploadSuccess" />
            </div>
          </a-form-item>
        </a-form>
      </div>
      <a-button @click="onSubmit" class="proof_btn" type="primary">{{
        $t("account.submit")
      }}</a-button>
    </div>
  </Account>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { message } from "ant-design-vue";
import { useI18n } from "vue-i18n";
import { throttle } from "@/utils/index.js";

import Account from "@/views/account/index.vue";
import NavBar from "@/components/navBar/index.vue";
import AmountInput from "@/components/amountInput/index.vue";
import ImageUpload from "@/components/imageUpload/index.vue";

import { postRechargeApi } from "@/api/userApi";

const route = useRoute();
const router = useRouter();
const { t } = useI18n();

const currentCoin = reactive({
  id: 0,
  icon: "",
  label: "",
  name: "",
  address: "",
});

const formRef = ref(null);
const formData = reactive({
  amount: "",
  voucher: "",
});
const formRules = {
  amount: [{ required: true, message: t("account.amount"), trigger: "change" }],
  voucher: [
    { required: true, message: t("account.paymentVoucher"), trigger: "change" },
  ],
};

onMounted(() => {
  let query = route.query;
  currentCoin.id = query.id;
  currentCoin.icon = query.icon;
  currentCoin.label = query.label;
  currentCoin.name = query.name;
  currentCoin.address = query.address;
});

const onBack = () => {
  router.back();
};

const uploadSuccess = (url) => {
  formData.voucher = url;
  formRef.value.validateFields(["voucher"]);
};

const onSubmit = throttle(() => {
  formRef.value
    .validate()
    .then(async () => {
      if (formData.amount <= 0) {
        message.error(t("account.PleaseEnterTheRechargeAmount"));
        return;
      }
      const res = await postRechargeApi({
        money: formData.amount,
        voucher: formData.voucher,
        dianhui: 0,
        currency: currentCoin.id,
        usdt_type: currentCoin.name,
        address: currentCoin.address,
      });
      message.success(res);
      setTimeout(() => {
        router.replace("/depositList");
      }, 800);
    })
    .catch((error) => {
      console.log("error", error);
    });
}, 3000);
</script>

<style lang="scss" scoped>
@import url("./index.scss");
</style>